<!-- <style>
  .test {
    width: 50px;
    height: 50px;
    background-color: red;
    border: solid 5px black;
    padding: 50px;
  }
</style>

<div class="test"></div>

<script>
  // offsetWidth  w + p*2 + b*2
  const testObj = document.querySelector(".test");
  console.log(testObj.offsetWidth); // 50 + 100 + 10
  console.log(testObj.clientWidth); // 50 + 100     w + p*2   150
  console.log(testObj.clientLeft); // b   5
</script> -->

<style>
  .father {
    width: 100px;
    height: 100px;
    overflow-y: scroll;
    background-color: black;
  }

  .son {
    width: 90px;
    height: 200px;
    background-color: red;
  }
</style>

<div class="father">
  <div class="son"></div>
</div>

<script>
  const fatherObj = document.querySelector(".father");
  console.log(fatherObj.scrollTop); // 0
  fatherObj.scrollTop = 100;

  console.log(fatherObj.scrollHeight); // 盒模型可见高度、和卷曲的高度(不可见的告诉)
</script>
